<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
</head>

<body>
    <div id='app' class="app" style="display:none" v-show="true">
        <!--
    <div class="research_top">
        <p class="content">{{detail.description}}</p>
        <p class="time">截止时间：{{detail.endTime}}</p>
    </div>
-->
        <div class="article-tabs">
            <ul>
                <li :class="tabIndex==0?'on':''" @click="changeTabIndex(0)">视频课程</li>
                <li :class="tabIndex==1?'on':''" @click="changeTabIndex(1)">文章课程</li>
            </ul>
        </div>
        <template v-if="tabIndex==0">
            <div class="app-content sche-list">
                <template v-for="moudle of moudleList" :key="moudle">
                    <p class="title"><i></i>{{moudle.moduleName}}</p>
                    <ul class="list list-sche-list">
                        <li v-for="course of moudle.mustCourseList" :key="course" @click="openLesson(course)">
                            <div class="dl">
                                <img :src="'../../image/x'+course.status+'.png'" alt="">
                            </div>
                            <div class="dr">
                                <div class="l1">
                                    <span class="l1-title">
                                        {{course.coursewareTitle}}
                                    </span>
                                </div>
                                <div class="l2">
                                    <span v-if="course.status==0" class="time">未观看</span>
                                    <span v-else class="time">已观看{{course.progressStr}}</span>
                                    <span class="finished">完成{{(course.rate * 100).toFixed(0)}}%</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
                <template v-if="hasTask">
                    <p class="title"><i></i>作业</p>
                    <ul class="list list-sche-list" v-for="moudle of moudleList">
                        <li v-for="moudleTask of moudle.taskList">
                            <div class="dl">
                                <img src="../../image/cst.png" alt="">
                            </div>
                            <div class="dr">
                                <div class="l1">
                                    <span class="l1-title">
                                        {{moudleTask.moduleTaskName}}
                                    </span>
                                </div>
                                <div class="l2">
                                    <span class="time">请在PC端提交作业</span>
                                    <span v-if="moudleTask.isSubmit==0" class="finished">未提交</span>
                                    <span v-else class="finished">已提交</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
                <template v-if="electiveCourseList.length>0">
                    <p class="title"><i></i>学习选修课</p>
                    <ul class="list list-sche-list">
                        <li v-for="elective of electiveCourseList" :key="elective" @click="openLesson(elective)">
                            <div class="dl">
                                <img :src="'../../image/x'+elective.status+'.png'" alt="">
                            </div>
                            <div class="dr">
                                <div class="l1">
                                    <span class="l1-title">
                                        {{elective.coursewareTitle}}
                                    </span>
                                </div>
                                <div class="l2">
                                    <span v-if="elective.status==0" class="time">未观看</span>
                                    <span v-else class="time">已观看{{elective.progressStr}}</span>
                                    <span class="finished">完成{{(elective.rate * 100).toFixed(0)}}%</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
                <template v-if="hasExam>0">
                    <p class="title"><i></i>做测试题</p>
                    <ul class="list list-sche-list">
                        <li @click="doTest(detail.examRule.examRuleId,detail.examRule.ruleName)">
                            <span v-show="detail.examStatus == 2 && detail.maxScore >= detail.examRule.qualified" style="position: absolute;right: 0;top: 0;"><img style="width: 45px"
                                    src="../../image/exam_passed.png" alt=""></span>
                            <span v-show="detail.examStatus == 2 && detail.maxScore < detail.examRule.qualified" style="position: absolute;right: 0;top: 0;"><img style="width: 45px"
                                    src="../../image/exam_not_passed.png" alt=""></span>
                            <div class="dl">
                                <img src="../../image/cst.png" alt="">
                            </div>
                            <div class="dr">
                                <div class="l1">
                                    <span class="l1-title">
                                        {{detail.examRule.ruleName}}
                                    </span>
                                </div>
                                <div class="l2">
                                    <span v-if="(detail.examStatus!=0&&detail.hasExam!=0)" class="finished">&nbsp;成绩：{{detail.maxScore}}分</span>
                                    <span class="time">&nbsp;满分{{detail.examRule.fullmarks}}分&nbsp;{{detail.examRule.qualified}}分合格</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
                <template v-if="!(isShared != 1 && !taskUsr)">
                    <p class="title"><i></i>学习心得</p>
                    <ul class="list list-sche-list" v-for="moudle of moudleList">
                        <li>
                            <div class="dl">
                                <img src="../../image/cst.png" alt="">
                            </div>
                            <div class="dr">
                                <div class="l1">
                                    <span class="l1-title">
                                        上传学习心得
                                    </span>
                                </div>
                                <div class="l2">
                                    <span class="time">请在PC端上传心得</span>
                                    <span v-if="submitSensibility == 1 || taskUsr" class="finished">已提交</span>
                                    <span v-else class="finished">未提交</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </template>
                <div class="btn-wrap">
                    <template v-if="(isShared>0)">
                        <div @click="publishMoment(1,'我已经学习完了 '+detail.scheduleName+' 的所有内容，快来围观吧！')" class="btn fb"><img src="../../image/fb.png" alt="">立即分享</div>
                        <!--                <div v-else class="btn fb"><img src="../../image/fb.png" alt="">已分享</div>-->
                    </template>
                    <template v-if="(hasCertificate != 0)">
                        <div v-if="(diplomaStatus>0)" class="btn ck" @click="showCertificate()"><img src="../../image/zs.png" alt="">查看证书</div>
                        <div v-if="" v-else-if="loaded" class="btn ck" @click="createCertificate()"><img src="../../image/zs.png" alt="">获取证书</div>
                    </template>
                </div>
            </div>
        </template>
        <template v-if="tabIndex==1">
            <div class="article-list">
                <ul>
                    <li v-for="(item, index) in newsList" :key="index" @click="openArticle(item)">
                        <div class="text"> {{item.title}} </div>
                        <span class="status"><img :src="'../../image/x'+item.spare1+'.png'" alt=""></span>
                    </li>
                </ul>
            </div>
        </template>
        <transition name="fade">
            <spinner v-if="loading"></spinner>
        </transition>
    </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                tabIndex: 0,
                imageBasePath: imageBasePath,
                scheduleUserId: '',
                scheduleId: 0,
                certificateId: '',
                certificateFileUrl: '',
                hasExam: 0,
                isShared: 0,
                hasCertificate: 0,
                hasTask: false,
                status: 0,
                diplomaStatus: 0,
                submitSensibility: 0,
                detail: {},
                examRule: {},
                moudleList: [],
                newsList: [],
                electiveCourseList: [],
                loading: false,
                loaded: false,
                taskUsr: null
            },
            mounted: function () {
                var $this = this;
                apiready = function () {
                    $this.scheduleId = api.pageParam.scheduleId;
                    $this.getPlan();
                    api.addEventListener({
                        name: 'scheduleMoment_back_event'
                    }, function (ret, err) {
                        // $this.submitSensibility = 1;
                    });
                    api.addEventListener({
                        name: 'reloadPlan'
                    }, function (ret, err) {
                        $this.loaded = false;
                        //刷新学习计划
                        $this.getPlan(true);
                    });
                    /* 学习计划有变动统一触发reloadPlan事件
                    api.addEventListener({
                        name: 'setExamResultPassed'
                    }, function(ret, err){
                            $this.detail.maxScore = ret.value.score;
                        $this.detail.examStatus = 2;
                    });
                    */
                    api.setRefreshHeaderInfo({
                        bgColor: '#f5f5f9',
                        textColor: '#aaa',
                        textDown: '下拉刷新...',
                        textUp: '松开刷新...'
                    }, function (ret, err) {
                        $this.loaded = false;
                        //刷新学习计划
                        $this.getPlan(true);
                    });
                }
            },
            methods: {
                changeTabIndex(index) {
                    this.tabIndex = index
                },
                getPlan(refresh) {
                    var $this = this;
                    $this.loading = true;
                    post('/client/schedule/getDetail', {
                        scheduleId: $this.scheduleId
                    }, function (ret) {
                        $this.loading = false;
                        if (refresh) {
                            api.refreshHeaderLoadDone();
                            $this.moudleList = [];
                            $this.electiveCourseList = [];
                        }
                        if (ret.isSuccess) {
                            $this.detail = ret.data;
                            $this.scheduleUserId = ret.data.scheduleUserId;
                            $this.moudleList = [];
                            $this.electiveCourseList = [];
                            $this.status = ret.data.status;
                            $this.hasExam = ret.data.hasExam;
                            $this.isShared = ret.data.isShared;
                            $this.taskUsr = ret.data.taskUsr;
                            $this.examStatus = ret.data.examStatus;
                            $this.hasCertificate = ret.data.hasCertificate;
                            $this.diplomaStatus = ret.data.diplomaStatus;
                            $this.submitSensibility = ret.data.submitSensibility;
                            $this.certificateId = ret.data.diplomaId;
                            $this.certificateFileUrl = ret.data.diplomaUrl;
                            $this.newsList = ret.data.newsList
                            if (ret.data.moudleList) {
                                ret.data.moudleList.forEach(function (item) {
                                    $this.moudleList.push(item);
                                    if (item.taskList && item.taskList.length > 0) {
                                        $this.hasTask = true;
                                    }
                                });
                            }
                            if (ret.data.electiveCourseList) {
                                ret.data.electiveCourseList.forEach(function (item) {
                                    $this.electiveCourseList.push(item)
                                });
                            }
                            $this.loaded = true;
                            parseTapmode();
                        } else {
                            $this.showMessage(ret.message);
                        }
                    });
                },
                doTest(examId, examName) {
                    var $this = this;
                    if ($this.status != 2) {
                        $this.showMessage('请先学完所有必修课程！');
                        return;
                    }
                    openWin('../study/examHis_win', { scheduleId: $this.scheduleId, examId: examId, examName: examName });
                },
                showMessage(message) {
                    msgUtil.toast({
                        msg: message
                    })
                },
                showCertificate: function () {
                    var $this = this;
                    if ($this.status != 2) {
                        $this.showMessage('请先学完所有必修课程！');
                        return;
                    }
                    if ($this.diplomaStatus < 1)
                        return;
                    if ($this.certificateFileUrl) {
                        openWin('../study/certificate_win', { certificateFileUrl: $this.certificateFileUrl, scheduleName: $this.detail.scheduleName });
                    } else {
                        post('/client/schedule/getDiploma', {
                            diplomaId: $this.certificateId
                        }, function (ret) {
                            if (ret.isSuccess) {
                                $this.certificateFileUrl = ret.data.fileUrl;
                                openWin('../study/certificate_win', { certificateFileUrl: $this.certificateFileUrl, scheduleName: $this.detail.scheduleName });
                            } else {
                                msgUtil.toast({
                                    msg: ret.message
                                })
                            }
                        });
                    }
                },
                createCertificate: function () {
                    var $this = this;
                    if ($this.status != 2) {
                        $this.showMessage('请先学完所有必修课程！');
                        return;
                    }

                    if ($this.hasExam > 0 && $this.examStatus != 2) {
                        $this.showMessage('请先完成考试！');
                        return;
                    }

                    if ($this.isShared == 1 && $this.submitSensibility == 0) {
                        $this.showMessage('请先上传学习心得！');
                        return;
                    }


                    post('/client/schedule/createDiploma', {
                        scheduleUserId: $this.scheduleUserId
                    }, function (ret) {
                        if (ret.isSuccess) {
                            $this.certificateId = ret.data;
                            $this.diplomaStatus = 1;
                        } else {
                            msgUtil.toast({
                                msg: ret.message
                            })
                        }
                    });
                },
                openLesson: function (course) {
                    openWin('../study/study_win', { courseId: course.courseId, coursewareId: course.coursewareId });
                },
                openArticle: function (course) {
                    openWin('./plan_article_detail', { newsId: course.newsId, scheduleId: course.scheduleId });
                },
                publishMoment: function (shareType, publishMsg) {
                    var $this = this;
                    if ($this.status != 2) {
                        $this.showMessage('请先学完所有必修课程！');
                        return;
                    }
                    if (shareType == 1) {
                        openWin('../discovery/publish_win', { shareType: 1, shareScheduleId: $this.scheduleId, publishMsg: publishMsg });
                    } else {
                        openWin('../discovery/publish_win', { publishMsg: publishMsg });
                    }
                }
            }
        });
    </script>
</body>

</html>